<template>
    <div class="page-detail">
        <com-swiper v-if="list.goodsImg" :data-source="list.goodsImg"></com-swiper>
        <div class="header">
            <h5>{{list.name}}</h5>
            <p>￥{{list.price}}</p>
        </div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;" @click="getDetail">
                <div class="weui-cell__bd">
                    <p>请选择产品类型规格</p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a>
        </div>

        <com-navbar :data-source="dataSource" @navBarClick="gotoPage"></com-navbar>
        <router-view></router-view>
        <com-cart-list :isShow="isShow" @hide="isShow = false"></com-cart-list>
        <button type="button" class="weui-btn weui-btn_default showCart" @click="isShow = true">查看购物车</button>
      
        <div class="cart-action-sheet" id="androidDialog1" v-show="showDetail">
            <div class="cart-action-sheet-mask" @click="showDetail = false"></div>
            <div class="cart-action-sheet-dialog">
                <div class="cart-action-sheet-dialog__hd">
                    <img v-if="cartDetail.img" :src="cartDetail.img" alt="">
                    <strong class="cart-action-sheet-dialog__title">{{cartDetail.name}}</strong>
                    <span>{{cartDetail.price}}</span>
                </div>
                <div class="cart-action-sheet-dialog__bd">
                  <div>
                      <span>规格: </span>
                      <span v-for="(i, index) in cartDetail.specifications" :class="{active:selected === index}" @click="changeSpecifiaction(index)">{{i}}</span>
                  </div>
                  <div>
                      <span>数量: </span>
                      <span class="sub" @click="sub">-</span>
                      <span class="number">{{number}}</span>
                      <span class="add" @click="add">+</span>
                  </div>
                </div>
               
            </div>
        </div>
    </div>
</template>
<script>
    import comNavbar from "../components/navbar"
    import comSwiper from '../components/swiper'
    import comCartList from '../components/cartList'
    import api from '../api/api'

    export default {
        data(){
            return {
                detailId: "",
                list: {
                },
                dataSource:[
                    {
                        title: "图文详情",
                        type: "desc"
                    },
                     {
                        title: "产品评价",
                        type: "comment"
                    }
                ],
                showDetail: false,
                number: 0,
                cartDetail: {},
                selected:0,
                isShow: false
            }
        },
      
        mounted(){
            this.getData({id: this.$route.params.id});
          
        },
        methods: {
            getData(params){
                this.$store.dispatch("setLoadingState", true);
                api.getGoodsImg(params, (res)=> {
                    this.$store.dispatch("setLoadingState", false);
                    this.list = res;
                });
            },
            gotoPage(e){
                var view = e.target.getAttribute("data-type");
                var id = this.$route.params.id;

                this.$router.push({
                    path: `/detail/${id}/${view}`
                })
            },
            getDetail(){
                var params = {
                    id: this.$route.params.id
                };
                this.showDetail = true
                var cartList = this.$store.getters.getCartList;
                var record = cartList.find(item=>item.id === +params.id);
              
                if (!record) {
                    api.getCart(params, (res)=> {
                        this.cartDetail = res;
                    });
                } else {
                    this.cartDetail = {
                       id: record.id,
                       name: record.name,
                       price: this.cartDetail.price,
                    };
                    this.number= record.quantity;
                    this.selected = record.specifications;

                    api.getCart(params, (res)=> {
                        let data = this.cartDetail;
                        this.cartDetail = Object.assign(res, data);
                    });
                }
            },
            add(){
                let params = {
                    id: +this.$route.params.id,
                    name: this.cartDetail.name,
                    price: this.cartDetail.price,
                    specifications: this.selected
                }
                this.$store.dispatch('addToCart', params).then(()=>this.number++).catch(()=>{
                    alert("库存不足");
                    return;
                })
            },
            sub(){
                if (this.number > 0) {
                    this.number--;
                    this.$store.dispatch('removeToCart', {id: +this.$route.params.id});
                }
            },
            
            changeSpecifiaction(e){
                this.selected = e;
            },
        },
        components: {
            comSwiper,
            comNavbar,
            comCartList
        }
    }
</script>
<style lang="sass">
    $baseSize: 16px;
    $borderBotttom: 1px solid #e5e5e5;
    .swiper-container {
        z-index: 0 !important
    }
    
    .page-detail {
        background: #f4f4f4;
        .header {
            background: #fff;
            text-indent: 1rem;
            border-bottom: $borderBotttom;
            h5 {
                font-weight: normal;
                font-size: $baseSize;
            }
            p {
                color: #e22
            }
        }
    }
    
    .weui-cells {
        margin-bottom: 15px;
    }
    
    #androidDialog1 {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        .cart-action-sheet-mask {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
        }
        .cart-action-sheet-dialog {
            background: #fff;
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
            z-index: 9999;
            padding: .5rem
        }
    }
    .active {
        color: #e66
    }
</style>